﻿// The Icon widget creates an element where the image is set by a CSS class
// The supported sizes are 16, 32, 64 and 128
define([
    'Wjs/ui/elements/View'
],
function (View) {
    'use strict';

    var PropertyGridRow,
        PropertyGridGroup,
        PropertyGrid = Wjs.defineOnce({

            onBeforeTypeDefined: function () {

                PropertyGridRow = Wjs.define({

                    type: 'PropertyGridRow',

                    base: Widget,

                    mixins: [
                        ValueChangedHandler
                    ],

                    construct: function (conf, parent, owner) {

                        var me = this;
                        conf = conf || {};

                        PropertyGridRow.base.constructor.call(me, conf, parent, owner);

                        me.addClass('w-property-row');

                        me.label = me.createElement(conf.label, me.main);
                        me.label.setAttributes({ 'class': 'wjs-label wjs-float-left' });

                        me.editor = typeManager.create(conf.editor, 'fieldEditor', me.main);
                        me.editor.owner = me;

                        // Activate the next editor if any
                        me.editor.onDeactivate = function () {
                            var propertyGroup = me.owner;

                            if (propertyGroup) {
                                propertyGroup.activateNextRow(me.name);
                            }
                        };

                        ValueChangedHandler.prototype.initialize.call(me, conf);
                    },

                    createMainElement: function (conf, parent) {
                        this.main = this.createElement(conf, parent);
                    },

                    activate: function () {
                        this.editor.activate();
                    },

                    deactivate: function (commit) {
                        this.editor.deactivate(commit);
                    }
                });

                PropertyGridGroup = Wjs.define({

                    type: 'PropertyGridGroup',

                    base: Panel,

                    mixins: [
                        ValueChangedHandler
                    ],

                    construct: function (conf, parent, owner) {
                        var me = this,
                        body,
                        label,
                        rows = [],
                        row;

                        conf = conf || {};

                        conf.overflowAuto = false; // Disable overflow auto for the property group

                        PropertyGridGroup.base.constructor.call(me, conf, parent, owner);

                        me.addClass('w-property-group');

                        body = me.body.main; // Now the body has been created

                        if (conf.label) {
                            label = me.createElement(conf.label, me.header);
                        }

                        if (conf.fields) {

                            conf.fields.forEach(function (propConf) { // Since the properties are dynamic, if we add something to the configuration it will create a new property row

                                for (var k in propConf) {
                                    row = typeManager.create(propConf[k], 'propertyRow', body);
                                    row.owner = me; // Set the owner
                                    row.name = k; // Set the name of the property in the row
                                    rows.push(row);
                                }
                            });

                            me.rows = rows;
                        }

                        ValueChangedHandler.prototype.initialize.call(me, conf);
                    },

                    // Activates the next property row of the group or if it is the last one then activates the one of the next group
                    activateNextRow: function (name) {
                        var propertyRows = this.rows,
                        i = Wjs.array.indexOf(propertyRows, function (c) {
                            return c.name === name;
                        }),
                        row = propertyRows[i];

                        if (row.activated) { // It is supposed to be deactivated
                            return;
                        }

                        if (i < propertyRows.length - 1) {
                            row = propertyRows[i + 1];

                            if (!row.activated) {
                                row.activate();
                            }
                        }
                        else { // Go to the first property row of the next property group
                        }
                    }

                });
            },

            type: 'PropertyGrid',

            base: Panel,

            mixins: [
                ValueChangedHandler
            ],

            construct: function (conf, parent, owner) {

                PropertyGrid.base.constructor.call(this, conf, parent, owner); // Call the base construct

                this.addClass('w-property-grid');

                if (conf.metadata) {
                    this.setMetadata(conf.metadata);
                }

                if (conf.record) {
                    this.setRecord(conf.record);
                }

                //            // Always create the footer to display the field description
                //            this.createFooter(conf.footer);

                ValueChangedHandler.prototype.initialize.call(this, conf);
            },

            setMetadata: function (metadata) {

                var me = this,
                    body = me.body.main,
                    group;

                //            if (util.isEquivalent(this.metadata, metadata)) { Enable when implemented
                //                return;
                //            }

                me.metadata = metadata;

                if (body.dom) { // It is been rendered
                    body.clear(); // Clear the children
                }

                metadata.groups.forEach(function (groupConf) {

                    //                util.augment(groupConf, {
                    //                    fieldWidth: me.fieldWidth
                    //                });

                    group = typeManager.create(groupConf, 'propertyGroup', body);
                    group.owner = me;
                });
            },

            setRecord: function (record) {
            }
        });

    return PropertyGrid;
});